<template>
    <div class="blog-detail">
    <zzyhub-header class="detail-header"></zzyhub-header>
    <div class="detail-main">
        <div class="detail-preview dp-table">
            <div class="detail-preview-left dp-tablecell">
                <img class="preview-img" :src=good.url>
            </div>
            <div class="detail-preview-right dp-tablecell">
                <h2>{{good.name}}</h2>
                <span style="font-size: 30px;color: #ff6600;font-weight: bold;">￥{{good.price}}</span>
                <Divider :dashed="true" style="margin-top: 5px;background-color: #b8b8b8;margin-bottom: 5px"></Divider>
                <div>
                    <span>爆料人：</span>
                    <a style="color:#2fb8f5;">{{good.author}}</a>
                    <span style="float: right">爆料时间：{{good.uploadDate}}</span>
                </div>
                <div style="margin-top:12px" class="dp-table">
                    <span style="float: left">标签：</span>
                    <tags class="detail-tag" type="default" :tags="good.tags"></tags>
                    <Button type="info" size="large" style="margin-top: 12px" @click="showPane">我要爆料</Button>
                    <Modal
                            v-model="show"
                            title="更新爆料价格"
                            @on-ok="ok"
                            @on-cancel="cancel">
                        <Input v-model="newPrice"/>
                    </Modal>
                    <div style="float: right;">
                        <Button style="margin-top: 38px"  @click="changeWatched">关注</Button>
                    </div>
                </div>
            </div>
        </div>
        <div class="detail-blog">
            <Divider style="margin-bottom: 0"></Divider>
            <Tabs value="name1">
                <TabPane label="商品详细" name="name1" style="padding: 15px 20px">
                    <div v-html="good.detail">
                    </div>
                </TabPane>
            </Tabs>
        </div>
    </div>
    <div class="detail-side">
        <div style="float: left;width: 4px;height: 35px;background-color: #2fb8f5;margin-top: 10px;margin-left: 6px"></div>
        <h4 style="margin-top: 10px;margin-left: 15px;font-size: 22px">爆料历史</h4>
        <div>
            <canvas id="myChart2" width="400px" height="400px"></canvas>
        </div>
    </div>
        <footers></footers>
    </div>
</template>

<script>
    import headers from "@/pages/layout/header";
    import Tags from "@/component/tags"
    import footer from "@/pages/layout/footer";
    import Chart from 'chart.js';
    import store from "@/store/store";
    export default {
        name: "blogDetail",
        data() {
            return {
                good:{
                    id:'',
                    url:'',
                    name: '',
                    price: '',
                    author: '',
                    uploadDate: '',
                    tags: [],
                    historyAuthor:[],
                    historyPrice:[],
                    detail: '',
                },
                show:false,
                single:false,
                newPrice:'',
                menuList: [{
                    id:'',
                    name:'',
                    path:'',
                    price:'',
                }]
            }
        },
        components: {
            'tags': Tags,
            'zzyhub-header': headers,
            'footers': footer
        },
        methods:{
          showPane(){
              this.show = true;
              window.console.log(this.$route.params.id)
          },
            changeWatched(){
                if(!this.single){
                    this.menuList.name = this.good.name;
                    this.menuList.id = this.good.id;
                    this.menuList.price = this.good.price;
                    store.commit('appendUserMenu',this.menuList)
                    this.single = true
                }
            },
            ok(){
                let list = []
                list= this.good.historyAuthor
                list.push(this.$store.getters.getLoginName)
                this.good.historyAuthor = list;
                list = []
                list=this.good.historyPrice;
                this.good.historyPrice = list.push(this.newPrice)
            }
        },
        created(){
            let id = this.$route.params.id;
            let goods = this.$store.getters.getGoods;
            let j;
            for(j = 0; j < goods.length; j++){
                if(goods[j].id ==id){
                    this.good = goods[j]
                }
            }
            window.console.log(this.good.name)
            let user = this.$store.getters.getMenuList;
            let i;
            for(i = 0; i < user.length; i++){
                if(user[i]==id){
                    this.single = true;
                }
            }
        },
        mounted(){
            var ctx2 = document.getElementById("myChart2");
            new Chart(ctx2, {
                type: "line",
                data: {
                    labels: this.good.historyAuthor,
                    datasets: [
                        {
                            label: this.good.name,
                            backgroundColor: "#2fb8f5",
                            borderColor: "#2fb8f5",
                            borderWidth: 2,
                            pointStrokeColor: "#fff",
                            pointStyle: "crossRot",
                            data: this.good.historyPrice,
                            cubicInterpolationMode: "monotone",
                            spanGaps: "false",
                            fill: "false"
                        }
                    ]
                },
                options: {

                }

            });
        },

    }
</script>

<style scoped>
    .detail-header {
        position: relative;
        height: 50px;
        top: 0;
        z-index: 300;
    }

    .blog-detail {
        position: relative;
        height: auto;
        background-color: #d7d7d7;
    }

    .detail-main {
        width: 900px;
        background-color: white;
        height: auto;
        position: relative;
        left: 50%;
        margin-top: 15px;
        margin-left: -500px;
        box-shadow: 1px 1px 3px;
        border-radius: 3px;
    }

    .detail-side {
        padding: 5px 10px;
        position: fixed;
        top: 65px;
        width: 350px;
        height: auto;
        background-color: white;
        left: 50%;
        margin-left: 420px;
        border-radius: 3px;
    }

    .preview-img {
        width: 384px;
        height: 230px;
        border-radius: 3px;
        border: solid 1px #666;
    }

    .detail-preview-left {
        margin-top: 40px;
        margin-left: 25px;
        float: left;
    }

    .detail-preview-right {
        width: 450px;
        height: auto;
        margin-top: 40px;
        margin-right: 8px;
        float: right;
    }

    .detail-blog {
    }
</style>